<template>
  <div class="main-an-wrap">
    <div class="main-an-inner"
    :style="[
      { opacity: opacity }
    ]"
    >
      <slot v-if="isShow"></slot>
    </div>

    <div class="main-an-bg">
      <div class="img-wrap">
        <img :src="src" alt=""/>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: 'MainAnimation'
}
</script>

<!-- main部分动画组件 -->
<script setup>
import src from '@/assets/vscode-icon'
import { watch, ref } from 'vue';
import { useRouter } from 'vue-router';
const router = useRouter();
let opacity = ref(0)
let timer = null
let isShow = ref(false)
watch(() => router.currentRoute.value.fullPath, () => {
  opacity.value = 0
  isShow.value = false
  if(timer) clearTimeout(timer)
  timer = setTimeout(() => {
    opacity.value = 1
    isShow.value = true
  }, 300)
}, { immediate: true })
</script>

<style lang="scss" scoped>
.main-an-wrap {
  position: relative;
  .main-an-inner {
    transition: opacity .3s linear;
    position: absolute;
    z-index: 10;
    background-color: var(--main-bg-color);
  }
  .main-an-bg {
    width: 100%;
    height: 100%;
    position: absolute;
    z-index: 9;
    .img-wrap {
      width: 100%;
      height: 100%;
      position: relative;
      img {
        width: 20%;
        height: 20%;
        object-fit: contain; /* 保持短边的比例 */
        position: absolute;
        left: 50%;
        top: 50%;
        transform: translate(-50%, -50%);
        opacity: .3;
      }
    }
  }
}
.main-an-wrap, .main-an-inner {
  width: 100%;
  height: 100%;
}

</style>